<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
</head>
<body>
<button id="btnGetBooks">获取所有图书</button>
<hr>

<input type="text" id="q_id" placeholder="输入要查询的图书id">
<button id="btnGetBookById">查询指定id的图书</button>
<hr>

<input type="text" id="a_title" placeholder="输入图书名称">
<input type="text" id="a_author" placeholder="输入图书作者">
<button id="btnAddBook">添加图书</button>
<hr>

<input type="text" id="u_id" placeholder="输入要修改的图书id">
<input type="text" id="u_title" placeholder="输入修改后的图书名称">
<input type="text" id="u_author" placeholder="输入修改后的图书作者">
<button id="btnUpdateBook">修改图书</button>
<hr>

<input type="text" id="d_id" placeholder="输入要删除的图书id">
<button id="btnDeleteBookById">删除指定id的图书</button>
<hr>

<h3>操作信息：</h3>
<p id="info"></p>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    document.getElementById("btnGetBooks").addEventListener("click", evt => {
        axios.get("http://127.0.0.1:8080/books")
            .then(function (response) {
                document.getElementById("info").innerHTML = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

    document.getElementById("btnGetBookById").addEventListener("click", evt => {
        const id = document.getElementById("q_id").value;
        axios.get("http://127.0.0.1:8080/books/" + id)
            .then(function (response) {
                document.getElementById("info").innerHTML = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

    document.getElementById("btnAddBook").addEventListener("click", evt => {
        const title = document.getElementById("a_title").value;
        const author = document.getElementById("a_author").value;
        axios.post("http://127.0.0.1:8080/books", {"title": title, "author": author})
            .then(function (response) {
                document.getElementById("info").innerHTML = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

    document.getElementById("btnUpdateBook").addEventListener("click", evt => {
        const id = document.getElementById("u_id").value;
        const title = document.getElementById("u_title").value;
        const author = document.getElementById("u_author").value;
        axios.put("http://127.0.0.1:8080/books/" + id, {"title": title, "author": author})
            .then(function (response) {
                document.getElementById("info").innerHTML = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

    document.getElementById("btnDeleteBookById").addEventListener("click", evt => {
        const id = document.getElementById("d_id").value;
        axios.delete("http://127.0.0.1:8080/books/" + id)
            .then(function (response) {
                document.getElementById("info").innerHTML = JSON.stringify(response.data);
            })
            .catch(function (error) {
                console.log(error)
            });
    });
</script>
</body>
</html>